<template>
	<view class="wrap bgw contents">
		<view v-if="userData != ''" class="users">
			<topUser @Setss="GoCreateDynamic" :userData="userData"></topUser>
		</view>
		<view class="banner">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="3000">
				<swiper-item v-if="data.video">
					<video :poster="data.videoCover" class="720" id="myVideo" :controls="true"   :show-mute-btn="true"
					 :show-play-btn="true" :src="data.video"></video>
				</swiper-item>
				<swiper-item v-if="data.images" v-for="(item,index) in data.images" :key="index">
					<image @tap="lookImg(i)" :src="item" mode="aspectFit"></image>
				</swiper-item> 
			</swiper>
		</view>
		<view v-if="data.products != '' " class="goods_list">
			<view @tap="GoGoods(v)" v-for="(v,i) in data.products" :key="i">
				<goods :goodsData="v"></goods>
			</view>
		</view>
		<view class="p30">
			<p class="goodsTitle1  two">
				{{data.title}}
			</p>
			<p class="goodsTitle2  ">
				{{data.content}}
			</p>
			<view class="texts">
				<view class="fl">
					<span @tap="GoJi(v)" v-for="(v,i) in data.markets" :key="i">
						#{{v.name}}#
					</span>
				</view>
				<view class="fr">
					浏览量 {{data.hits}}
				</view>
			</view>
		</view>
		<comment v-if="dynamicDataP != ''" :index="index" ref="comment" :dynamicData="dynamicDataP" :id="id"></comment>
	</view>
</template>

<script>
	import topUser from '@/components/top_user/top_user.vue'
	import goods from '@/components/goods/goods.vue'
	import comment from './comment.vue'
	import {
		DynamicDetail
	} from '../../api/api.js'
	export default {
		components: {
			topUser,
			goods,
			comment
		},
		data() {
			return {
				userData: {},
				id: 0,
				dynamicDataP: [],
				data: {
					video: '',
					image: []
				},
				index:undefined,
			};
		},
		onLoad(e) {
			this.id = e.id
			this.index = e.index
		},
		onShow() {
			this.init()
		},
		onReachBottom() {
			if (this.dynamicDataP != '') {
				this.$refs['comment'].checking()
			}
		},
		methods: { 
			GoCreateDynamic() {
				uni.setStorageSync('upDynamic', this.data)
				this.$navigateTo('../CreateDynamic/CreateDynamic')
			},
			GoJi(v) {
				this.$navigateTo(`../ji/ji?id=${v.id}`)
			},
			GoGoods(v) {
				this.$navigateTo(`../GoodsDetails/GoodsDetails?id=${v.id}`)
			},
			// 看 轮播图
			lookImg(i) {
				uni.previewImage({
					current: i,
					urls: this.data.images,
					indicator: 'default',
					loop: true
				});
			},
			async init() {
				let data = await DynamicDetail({
					id: this.id
				})
				data = data.data
				this.dynamicDataP = data
				this.userData = {
					isCreator: data.isCreator,
					isFollow: data.isFollow,
					name: data.dynamic.member.eperAccount.eperUsername,
					img: data.dynamic.member.eperAccount.eperAvatarImg,
					createdDate: data.dynamic.createdDate.slice(0, 10),
					state: 1,
					id: data.dynamic.member.id
				}
				this.data = data.dynamic
				let imgArr = []
				console.log(this.data.videoCover);
				// for (let i = 0; i < this.data.images.length; i++) {
				// 	let img = {
				// 		image: this.data.images[i]
				// 	}
				// 	imgArr.pushimg
				// } 
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
